<script setup lang="ts">
import { ref } from 'vue'
import KnowledgeCard from './knowledge-card.vue'
import { patientHomeKnowledge } from '@/api/home'
import type {
  patientHomeKnowledgeItem,
  HomeKnowledgeItem,
  patientHomeKnowledgeReq
} from '@/types/home'
const props = defineProps<{
  type: HomeKnowledgeItem
}>()
const list = ref<patientHomeKnowledgeItem[]>([])
const params = ref<patientHomeKnowledgeReq>({
  type: 'food',
  current: 1,
  pageSize: 10
})
const getData = async () => {
  // 调用接口
  params.value.type = props.type
  const res = await patientHomeKnowledge(params.value)
  // 修改loading的值
  loading.value = false
  // 数据累加
  list.value.push(...res.data.rows)
  //  页码++
  params.value.current++
  // 判断是否加载完成
  if (list.value.length >= res.data.total) {
    finished.value = true
  }
}
// getData()

// 上拉加载
const loading = ref(false)
const finished = ref(false)
</script>

<template>
  <div class="knowledge-list">
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="getData"
    >
      <knowledge-card v-for="i in list" :key="i.id" :item="i"></knowledge-card>
    </van-list>
  </div>
</template>

<style lang="scss" scoped>
.knowledge-list {
  padding: 0 15px;
}
</style>
